<template>
  <div class="select-role2">
    <div class="shadow" v-show="rightPopup">
      <div class="text-warning">提示：未通过身份认证的就诊人请先进行身份认证</div>
      <div style="background:#f2f2f2;padding:10px;">
        <mu-flexbox
          class="family-item bgwhite re"
          v-for="(f, index) in familys"
          :key="index + '-only'"
        >
          <mu-flexbox-item>
            <div class="family-header" @click="selectPersonHandle(f)">
              <mu-flexbox>
                <mu-flexbox-item>
                  <img src="../assets/images/middle_man.png" v-if="f.sexcode===1" width="64" />
                  <img src="../assets/images/middle_women.png" v-else width="64" />
                </mu-flexbox-item>
                <mu-flexbox-item :grow="4">
                  <div>
                    <span class="title">{{f.realname}}</span>
                    <span
                      class="label label-success"
                      v-if="f.certificationValidityPeriod === '1'"
                    >已认证</span>
                    <span class="label label-warning" v-else>未认证</span>
                  </div>
                  <div v-if="showIDCard">{{f.idcard | hideIDCard}}</div>
                </mu-flexbox-item>
              </mu-flexbox>
            </div>
            <div class="re min-height" v-if="f.hisBusCardList.length > 0 && showAllCards">
              <p
                v-for="(item, index) in f.hisBusCardList"
                :key="index"
                @click="selectCardHandle(f, item)"
              >
                {{item.patientMedicalCardType | getCardType}} - {{item.patientMedicalCardNumber}}
                <i
                  class="iconfont icon-small-arrow-right fr t3 v-middle"
                ></i>
              </p>
            </div>
          </mu-flexbox-item>
        </mu-flexbox>

        <mu-flexbox :gutter="0" v-if="toFamily" class="pd40" style="margin-top:4em;">
          <mu-flexbox-item>
            <mu-raised-button
              class="submit-btn no-shadow"
              label="就诊人管理"
              to="/setting/family"
              fullWidth
              primary
            />
          </mu-flexbox-item>
        </mu-flexbox>
        <mu-flexbox
          :gutter="0"
          v-else
          v-show="familys.length < 6"
          class="pd40"
          style="margin-top:4em;"
        >
          <mu-flexbox-item>
            <mu-raised-button
              class="submit-btn no-shadow"
              label="添加就诊人"
              to="/setting/family/add"
              fullWidth
              primary
            />
          </mu-flexbox-item>
        </mu-flexbox>
      </div>
    </div>
    <mu-dialog :open="dialogGenerate">
      <div v-if="isCreateOnline">
        <div class="center">
          <p>未查询到患者档案，是否在线建档？</p>
        </div>
        <div class="login center mt20">
          <mu-flat-button slot="actions" @click="dialogGenerate=false" label="取消" />
          <mu-flat-button slot="actions" primary @click="createHandle" label="在线建档" />
        </div>
      </div>
      <div v-else>
        <div class="center">
          <p>未查询到就诊人档案，请到医院窗口建档</p>
        </div>
        <div class="login center mt20">
          <mu-flat-button primary slot="actions" @click="dialogGenerate=false" label="确定" />
        </div>
      </div>
    </mu-dialog>
    <mu-dialog :open="showBindcardDialog">
      <div class="center">此就诊人尚未认证，去认证吗？</div>
      <div class="login center mt20">
        <mu-flat-button slot="actions" @click="showBindcardDialog=false" label="取消" />
        <mu-flat-button slot="actions" primary @click="bindConfirm" label="去认证" />
      </div>
    </mu-dialog>

    <mu-dialog :open="needCardDialog">
      <div class="center">
        此就诊人尚未办卡，请
        <span class="t5">凭门诊号到医院自助机或窗口</span>进行办卡就诊。
      </div>
      <div class="login center mt20">
        <mu-flat-button slot="actions" primary @click="needCardDialog=false" label="确定" />
      </div>
    </mu-dialog>
  </div>
</template>

<script>
import { commonAjaxJson, RESTFUL_API } from "@/api/api";
export default {
  data() {
    return {
      hospitalCode: sessionStorage.getItem("hospitalCode") || "",
      dialogGenerate: false,
      isCreateOnline: false,
      selectedPerson: "请选择就诊人",
      selectedNumber: "",
      rightPopup: false,
      familys: [],
      familyPerson: JSON.parse(sessionStorage.familyPerson || "{}"),
      showBindcardDialog: false,
      needCardDialog: false
    };
  },
  filters: {
    getCardType(val) {
      if (val == 1) {
        return "居民健康卡";
      } else if (val == 2) {
        return "医院就诊卡";
      } else if (val == 3) {
        return "医保(社保)卡";
      } else if (val == 4) {
        return "市民卡";
      } else if (val == 5) {
        return "住院号码";
      } else {
        return "其他";
      }
      // 1.居民健康卡 2.医院就诊卡 3.医保(社保)卡  4市民卡 5.住院号码 .9.其他
    }
  },
  props: {
    // 显示卡号
    showCardNumber: {
      type: Boolean,
      default: true
    },
    // 显示所有卡
    showAllCards: {
      type: Boolean,
      default: true
    },
    // 当面模块是否需要就诊卡
    needCard: {
      type: Number,
      default: 0
    },
    // 是否必须认证
    needCertificate: {
      type: Number,
      default: 1
    },
    // 底部按钮跳转就诊人管理true/添加就诊人false
    toFamily: {
      type: Boolean,
      default: false
    },
    // 显示身份证号
    showIDCard: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    if (!this.familyPerson.realname) {
      this.show();
    }
    this.getFamilys();
  },
  methods: {
    show() {
      this.rightPopup = true;
    },
    getFamilys() {
      commonAjaxJson(
        RESTFUL_API.listFamily,
        { userId: sessionStorage.getItem("userId") },
        true
      ).then(res => {
        if (res.data.code == 200) {
          this.getSysParameterList();
          this.familys = res.data.data;
          // let fp = res.data.data[0];
          // this.familyPerson = res.data.data[0];
          // sessionStorage.setItem(
          //   "familyPerson",
          //   JSON.stringify(res.data.data[0])
          // );
          // this.selectedPerson = fp.realname;
          // const IS_CERT = fp.certificationValidityPeriod == "1";
          // const HAS_PATIENT_NUMBER = !!fp.patientcodeNumber;
          // // 已认证
          // if (IS_CERT) {
          //   if (HAS_PATIENT_NUMBER) {
          //     this.selectedNumber = fp.patientcodeNumber || "";
          //     this.selectedPerson = fp.realname;
          //     this.$emit("familychang", fp);
          //   } else {
          //     const first = res.data.data[0];
          //     if (first.patientcode) {
          //       if (
          //         !first.patientcodeNumber &&
          //         first.hisBusCardList &&
          //         first.hisBusCardList.length > 0
          //       ) {
          //         first.patientcodeNumber =
          //           first.hisBusCardList[0].patientMedicalCardNumber;
          //       }
          //       this.selectedNumber = first.patientcodeNumber || "";
          //       this.selectedPerson = first.realname;
          //       this.familyPerson = first;
          //       sessionStorage.familyPerson = JSON.stringify(first);
          //       this.$emit("familychang", first);
          //     }
          //   }
          // }
        }
      });
    },
    bindConfirm() {
      this.showBindcardDialog = false;
      this.getHisPhone().then(res => {
        if (res.data.code == 200) {
          if (res.data.data && res.data.data.length > 0) {
            this.$router.push({ path: "/setting/bind-visitcard" });
          } else {
            this.dialogGenerate = true;
          }
        }
      });
    },
    selectPersonHandle(f) {
      if (this.needCertificate == 0) {
        sessionStorage.familyPerson = JSON.stringify(f);
        this.$emit("familychang", f);
        this.rightPopup = false;
        return;
      }
      // 没认证的提示认证
      if (f.certificationValidityPeriod !== "1") {
        sessionStorage.editFamily = JSON.stringify(f);
        this.showBindcardDialog = true;
        return;
      }
      // 已经认证
      const cards = f.hisBusCardList;
      if (cards.length == 0) {
        return;
      }
      if (cards.length > 1) {
        if (!this.showAllCards) {
          this.selectCardHandle(f, cards[0]);
        }
        return;
      }
      this.selectCardHandle(f, cards[0]);
    },
    selectCardHandle(f, item) {
      if (item.patientIsHasBusCard == 0 && this.needCard == 1) {
        this.needCardDialog = true;
        return;
      }
      f.patientcode = item.patientCode;
      f.patientcodeNumber = item.patientMedicalCardNumber;
      f.patientBusCardBalance = item.patientBusCardBalance || 0;
      sessionStorage.familyPerson = JSON.stringify(f);
      this.selectedPerson = f.realname;
      this.selectedNumber = f.patientcodeNumber;
      this.$emit("familychang", f);
      this.rightPopup = false;
    },
    createHandle() {
      this.$router.push({
        path: "/setting/createOnline",
        query: {
          redirect: this.$route.fullPath
        }
      });
    },
    getHisPhone(operationType) {
      let q = JSON.parse(
        sessionStorage.editFamily || "{listBasAccountCard: []}"
      );
      const params = {
        hospitalCode: this.hospitalCode,
        operationType: operationType || "1"
      };
      if (q.relation > 0) {
        params.fid = q.id;
      }
      return commonAjaxJson(RESTFUL_API.getHisPhone, params, true);
    },
    /**
     * 获取系统参数
     */
    getSysParameterList() {
      let params = {
        moduleId: "000000",
        parameterKey: "ol_archivable"
      };
      commonAjaxJson(RESTFUL_API.getSysParameterList, params, true).then(
        res => {
          this.isCreateOnline = res.data.data[0].parameterValue == 1;
        }
      );
    }
  }
};
</script>

<style lang="less">
@import "../common/css/flex.css";
.shadow {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #fff;
  z-index: 99;
  overflow-y: auto;
}
.family-item {
  padding: 10px;
  margin-bottom: 0.6em;
  border-radius: 4px;
  .default-arrow {
    background: url(../assets/images/tab_qhjzr.png) no-repeat;
    background-size: 40px;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
  }
  .family-header {
  }
  .title {
    font-size: 1.2em;
  }
  .icon-iconnan {
    color: #64a9f6;
    font-size: 0.9em;
  }
  .icon-iconnv {
    color: #f8868b;
    font-size: 0.9em;
  }
  p {
    margin: 0.6em 0 0 0;
    color: #666;
  }
  .right-button {
    position: absolute;
    right: 0;
    top: 0;
  }
  .min-height {
    // min-height: 40px;
    p {
      border-top: 1px solid #f2f2f2;
      padding: 10px 0;
    }
  }
  .label {
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    padding: 2px 6px;
    &.label-success {
      background: #0abf71;
    }
    &.label-warning {
      background: #ff8000;
    }
  }
}
</style>
